<template>
	<div>
		<div class="boxes">
			<div class="boxes-back vue-flex" @click="back()">
				<img class="boxes-icon" src="../../../assets/img/left.png" alt="">
				<div>返回</div>
			</div>
			
			<div v-loading="loading">
				<div class="boxes-title">{{msg.title}}</div>
				
				<div class="boxes-time vue-around">
					<div>活动时间：{{msg.startTime}} - {{msg.endTime}}</div>
				</div>
				
				<div class="vue-flex2 boxes-msg">
					<div class="boxes-name">活动地址：</div>
					<div>{{msg.address}}</div>
				</div>
				
				<div class="vue-flex2 boxes-msg">
					<div class="boxes-name">负责人姓名：</div>
					<div>{{msg.hdfzr}}</div>
				</div>
				<div class="vue-flex2 boxes-msg">
					<div class="boxes-name">负责人电话：</div>
					<div>{{msg.telephone}}</div>
				</div>
				
				<div class="vue-flex2 boxes-msg">
					<div class="boxes-name">活动简介：</div>
					<div>{{msg.content}}</div>
				</div>
				
				<div class="boxes-msg">
					<div class="boxes-name">活动状态：</div>
					<div class="vue-center" v-for="(item,index) in list" :key="index">
						<div class="boxes-left">{{item.userName}}</div>
						<div class="boxes-right">{{item.isSign}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { activityManageDetail } from '../../../network/api';
export default {
	name:"djhdDetail",
	data() {
		return {
			loading:true,
			msg:{},
			list:[]
		};
	},
	created() {
		
	},
	mounted() {
		// 上个页面的参数 id
		console.log(this.$route.query.id)
		this.getDetail()
	},
	methods: {
		back(){
			this.$router.go(-1);//返回上一层
		},
		
		getDetail() {
			let param = {
				userId: localStorage.getItem('userid'),
				acvitityId:this.$route.query.id
			};
			activityManageDetail(param).then(res => {
				// console.log(res);
				this.msg = res.retData,
				this.list = res.retData.userList
				this.loading = false
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.boxes{
	border: 1px solid #eeeeee;
	text-align: left;
	border-top: 2px solid #cc0000;
	margin: 20px 100px;
}
.boxes-back{
	border-bottom: 1px solid #eeeeee;
	padding:10px 20px;
	color: #CB1C1D;
	font-weight: bold;
}
.boxes-icon{
	width: 25px;
	height: 25px;
	margin-right: 5px;
}
.boxes-title{
	text-align: center;
	padding:15px 20px;
	font-size: 20px;
	font-weight: bold;
}

.boxes-time{
	background-color: #E7E7E7;
	color: #7B6666;
	font-size: 14px;
	padding: 10px 50px;
	margin: 0 55px 20px 55px;
}

.boxes-msg{
	padding: 0px 55px 20px 55px;
	text-align: justify;
	line-height: 160%;
}
.boxes-name{
	white-space: nowrap;
	font-weight: bold;
}
.boxes-left{
	width: 100px;
	text-align: left;
}
.boxes-right{
	width: 100px;
	text-align: right;
}
</style>
